<template>
	<div class="page-container dashboard-container">
		<el-row class="overview-wrapper" :gutter="20">
			<el-col :span="6" class="overview-item-wrapper">
				<div class="overview-item">
					<h6 class="item-title">权益新开通人数</h6>
					<p class="count-value">{{ privilege.amount }}</p>
					<el-row class="percent-wrapper">
						<el-col :span="12">
							周同比
							<i :class="privilege.weekClass" />
							{{privilege.week}}%
						</el-col>
						<el-col :span="12">
							日同比
							<i :class="privilege.dayClass" />
							{{privilege.day}}%
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6" class="overview-item-wrapper">
				<div class="overview-item">
					<h6 class="item-title">订单金额</h6>
					<p class="count-value">{{ orderMoney.amount }}</p>
					<el-row class="percent-wrapper">
						<el-col :span="12">
							周同比
							<i :class="orderMoney.weekClass" />
							{{orderMoney.week}}%
						</el-col>
						<el-col :span="12">
							日同比
							<i :class="orderMoney.dayClass" />
							{{orderMoney.day}}%
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6" class="overview-item-wrapper">
				<div class="overview-item">
					<h6 class="item-title">新增用户</h6>
					<p class="count-value">{{ memberAdd.amount }}</p>
					<el-row class="percent-wrapper">
						<el-col :span="12">
							周同比
							<i :class="memberAdd.weekClass" />
							{{memberAdd.week}}%
						</el-col>
						<el-col :span="12">
							日同比
							<i :class="memberAdd.dayClass" />
							{{memberAdd.day}}%
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6" class="overview-item-wrapper">
				<div class="overview-item">
					<h6 class="item-title">提现申请</h6>
					<p class="count-value">{{ withdrawApply.amount }}</p>
					<el-row class="percent-wrapper">
						<el-col :span="12">
							周同比
							<i :class="withdrawApply.weekClass" />
							{{withdrawApply.week}}%
						</el-col>
						<el-col :span="12">
							日同比
							<i :class="withdrawApply.dayClass" />
							{{withdrawApply.day}}%
						</el-col>
					</el-row>
				</div>
			</el-col>
		</el-row>

    <el-row class="top-wrapper" :gutter="20">
      <el-col :span="8">
        <el-card class="top-item" header="今日最佳影院" :body-style="{height: '450px'}">
          <img class="head-icon" :src="bestCinema.icon || HeadIcon"/>
          <h6 class="top-name">{{bestCinema.cinemaName}}</h6>
          <address class="info-address">{{ bestCinema.address }}</address>
          <ul class="info-list">
            <li class="info-item">
              <span class="info-label">权益消耗人次：</span>
              <strong class="info-value">{{bestCinema.amount}}</strong>
            </li>
            <li class="info-item">
              <span class="info-label">订单笔数：</span>
              <strong class="info-value">{{bestCinema.orderFrequency}}笔</strong>
            </li>
            <li class="info-item">
              <span class="info-label">订单金额：</span>
              <strong class="info-value">{{bestCinema.orderAmount}}</strong>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="top-item" header="今日最佳渠道商" :body-style="{height: '450px'}">
          <img class="head-icon" :src="bestChannel.icon || HeadIcon"/>
          <h6 class="top-name">{{bestChannel.channelName}}</h6>
          <address class="info-address"/>
          <ul class="info-list">
            <li class="info-item">
              <span class="info-label">权益开通数：</span>
              <strong class="info-value">{{bestChannel.amount || 0}}位</strong>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="top-item" header="今日最佳经销商" :body-style="{height: '440px'}">
          <img class="head-icon" :src="bestDealer.icon || HeadIcon"/>
          <h6 class="top-name">{{bestDealer.dealerName}}</h6>
          <address class="info-address"/>
          <ul class="info-list">
            <li class="info-item">
              <span class="info-label">权益开通数：</span>
              <strong class="info-value">{{bestDealer.amount}}位</strong>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
	</div>
</template>

<script>
import {
	privilegeStatisticsOpened, 
	privilegeStatisticsTotal,
	memberAddCount,
	withdrawRecordCount,
	bestCinema,
	bestChannel,
	bestDealer
} from '@/api/dashboard'
import HeadIcon from "@/assets/tempImages/head-icon.png";

export default {
	name: "Dashboard",
	data() {
		return {
			HeadIcon,
			privilege: {
				amount: 0,
        week: 0,
        weekClass: 'el-icon-caret-top',
        day: 0,
        dayClass: 'el-icon-caret-top',
			},
			orderMoney: {
				amount: 0,
        week: 0,
        weekClass: 'el-icon-caret-top',
        day: 0,
        dayClass: 'el-icon-caret-top',
			},
			memberAdd: {
				amount: 0,
				week: 0,
				weekClass: 'el-icon-caret-top',
        day: 0,
        dayClass: 'el-icon-caret-top',
			},
			withdrawApply: {
				amount: 0,
				week: 0,
				weekClass: 'el-icon-caret-top',
        day: 0,
        dayClass: 'el-icon-caret-top',
			},
			bestCinema: {
				icon: '',
				cinemaName: "UME",
				address: "",
				amount: 0,
				orderAmount: 0,
				orderFrequency: 0
			},
			bestChannel: {
				icon: "",
				channelName: "工商银行",
				amount: 0
			},
			bestDealer: {
				icon: '',
				dealerName: '',
				amount: 0
			}
		};
	},
	methods: {
		getClass(value = 0) {
			return value >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
		},
		async privilegeStatisticsOpened() {
			try {
				const {data} = await privilegeStatisticsOpened()
				this.privilege.amount = data.amount || 0
				this.privilege.week = data.week || 0
				this.privilege.weekClass = this.getClass(this.privilege.week)
				this.privilege.day = data.day || 0
				this.privilege.dayClass = this.getClass(this.privilege.day)
			} catch (error) {
				console.log(error)
			}
		},
		async privilegeStatisticsTotal() {
			try {
				const {data} = await privilegeStatisticsTotal()
				this.orderMoney.amount = data.amount || 0
				this.orderMoney.week = data.week || 0
				this.orderMoney.weekClass = this.getClass(this.orderMoney.week)
				this.orderMoney.day = data.day || 0
				this.orderMoney.dayClass = this.getClass(this.orderMoney.day)
			} catch (error) {
				console.log(error)
			}
		},
		async memberAddCount() {
			try {
				const {data} = await memberAddCount()
				this.memberAdd.amount = data.amount || 0
				this.memberAdd.week = data.week || 0
				this.memberAdd.weekClass = this.getClass(this.memberAdd.week)
				this.memberAdd.day = data.day || 0
				this.memberAdd.dayClass = this.getClass(this.memberAdd.day)
			} catch (error) {
				console.log(error)
			}
		},
		async withdrawRecordCount() {
			try {
				const {data} = await withdrawRecordCount()
				this.withdrawApply.amount = data.amount || 0
				this.withdrawApply.week = data.week || 0
				this.withdrawApply.weekClass = this.getClass(this.withdrawApply.week)
				this.withdrawApply.day = data.day || 0
				this.withdrawApply.dayClass = this.getClass(this.withdrawApply.day)
			} catch (error) {
				console.log(error)
			}
		},
		async requestBestCinema() {
			try {
				const {data} = await bestCinema()
				this.bestCinema = data || {}
			} catch (error) {
				console.log(error)
			}
		},
		async requestBestChannel() {
			try {
				const {data} = await bestChannel()
				this.bestChannel = data || {}
			} catch (error) {
				console.log(error)
			}
		},
		async requestBestDealer() {
			try {
				const {data} = await bestDealer()
				this.bestDealer = data || {}
			} catch (error) {
				console.log(error)
			}
		}
	},
	created() {
		this.privilegeStatisticsOpened()
		this.privilegeStatisticsTotal()
		this.memberAddCount()
		this.withdrawRecordCount()
		this.requestBestCinema()
		this.requestBestChannel()
		this.requestBestDealer()
	}
};
</script>

<style lang="scss" scoped>
.dashboard {
	&-container {
		background-color: transparent;
	}
}
.overview-wrapper {
	display: flex;

	.overview-item {
		flex: 1;
    padding: 20px;
		border-radius: 2;
		background-color: #fff;
	}

  .item-title{
    font-weight: normal;
    color: rgba(0, 0, 0, 0.427450980392157);
    line-height: 22px;
  }

  .count-value{
    margin-top: 8px;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 38px;
  }

  .percent-wrapper{
    margin-top: 24px;
    color: rgba(0, 0, 0, 0.427450980392157);
    line-height: 22px;

    .el-icon-caret-top{
      color: rgba(82, 196, 26, 0.647058823529412);
    }

    .el-icon-caret-bottom{
      color: #F5222D;
    }
  }
}

.top-wrapper{
  margin-top: 40px;
}
.top-item{
  text-align: center;

  .head-icon{
    width: 120px;
    height: 120px;
    margin-top: 40px;
  }

  .top-name{
    margin-top: 18px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: normal;
    font-size: 20px;
    color: #333333;
  }

  .info-address{
    margin-top: 18px;
    height: 20px;
    font-size: 20px;
    color: #333333;
    font-style: normal;
  }
  
  .info-list{
    margin-top: 24px;
  }

  .info-item{
    display: flex;
    margin-top: 16px;
  }

  .info-label{
    width: 40%;
    text-align: right;
    color: #3399ff;
    font-size: 16px;
  }

  .info-value{
    width: 60%;
    color: #666;
    font-size: 14px;
  }
}
</style>
